<template>
    <div style="overflow: hidden">
        <div>
            <el-table :row-key="getRowKeys" :data="deliveryPlanList" :expand-row-keys="expands"
                    style="width: 100%" @expand-change="expandSelect" @select-all="dialogCheck"
                    @select="dialogCheck" @selection-change="dialogCheckChange" ref="multipleTable" v-loading="loading"
            >
                <el-table-column type="selection"></el-table-column>
                <el-table-column label="合同单号" prop="contract.contractNum" align="center"></el-table-column>
<!--                <el-table-column label="合同名称" prop="contract.theme" align="center"></el-table-column>-->
                <el-table-column label="交付期数" prop="deliveryTime.name" align="center"></el-table-column>
                <el-table-column label="负责人" prop="principal.empName" align="center"></el-table-column>
                <el-table-column label="创建日期" align="center">
                    <template slot-scope="s">
                        <span>{{s.row.deliveryMakeDate | format_date}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="交付日期" align="center">
                    <template slot-scope="s">
                        <span>{{s.row.deliveryPlanDate | format_date}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="remark" align="center">
                    <template slot-scope="s">
                        {{s.row.remark?s.row.remark:"无"}}
                    </template>
                </el-table-column>
                <el-table-column type="expand">
                    <template slot-scope="s">
                        <!--商品的数据-->
                        <div>
                            <table border="0" cellpadding="3" class="table-s00" width="100%" cellspacing="0">
                                <tbody>
                                    <tr>
                                        <th style="text-align: center">产品编号</th>
                                        <th style="text-align: center">产品图片</th>
                                        <th style="text-align: center">产品名称</th>
                                        <th style="text-align: center">产品品牌</th>
                                        <th style="text-align: center">库存数量</th>
                                        <th style="text-align: center">属性</th>
                                        <th style="text-align: center">出库数量</th>
                                    </tr>
                                    <tr v-for="pro in s.row.deliveryProLists" :key="pro.deliveryProListId">
                                        <td style="text-align: center">
                                            <span>
                                                {{pro.productList.proDetail.proDetailId}}
                                            </span>
                                        </td>
                                        <td style="text-align: center">
                                            <el-image :src="pro.productList.proDetail.proImgSrc" style="width:50px;height:50px"></el-image>
                                        </td>
                                        <td  style="text-align: center">
                                            <span>
                                                {{pro.productList.proDetail.product.productName}}
                                            </span>
                                        </td>
                                        <td style="text-align: center">
                                            <span>
                                                {{pro.productList.proDetail.product.productBrand}}
                                            </span>
                                        </td>
                                        <td style="text-align: center">
                                            <span>
                                                {{pro.productList.proDetail.wareNum}}
                                            </span>
                                        </td>
                                        <td style="text-align: center">
                                            <span v-for="item in pro.productList.proDetail.abilities" :key="item.abilityId">
                                                {{item.abilityName}} &emsp;
                                            </span>
                                        </td>
                                        <td style="text-align: center">
                                            <span>
                                                {{pro.productList.proCount}}
                                            </span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="total, prev, pager, next" :total="total" :current-page.sync="currPage"
                           :page-size="pageSize"  style="margin-left: 30px" @current-change="change_page">
            </el-pagination>
        </div>
        <div style="clear: both"></div>
        <el-button type="primary" style="margin-left:44%;" @click="save">保存</el-button>
        <el-button @click="cancel">取消</el-button>
    </div>
</template>

<script>
    export default {
        name: "out_add_deliveryPlan",
        data(){
            return{
                loading:true,
                //当前页码
                currPage:1,
                //页大小
                pageSize:3,
                //总页数
                total:0,
                //交付计划数据
                deliveryPlanList:[],
                //单选操作
                selectioned:{},
                //下拉单选
                expands: [],
                getRowKeys(row) {
                    return row.deliveryPlanId
                },
                //新增出库详情表数据
                wareDetail:{
                    outNum:0,
                    proDetail:{}
                },
            }
        },
        methods:{
            //初始化数据
            initData(currpage){
                this.loading = true
                this.axios.get("api/ware/delivery-plan",{params:{"currPage":currpage,"pageSize":this.pageSize}})
                    .then(v=>{
                        this.deliveryPlanList = v.data.data;
                        this.total = v.data.total;
                        this.loading = false
                    }).catch(() => {
                    this.loading = false
                    this.global.mes_error("获取数据失败！")
                })
            },
            //分页页码改变事件
            change_page(currPage){
                this.initData(currPage);
            },
            //下拉单选
            expandSelect(row, expandedRows){
                //这个方法必须每行id值不同
                let that = this
                if (expandedRows.length) {
                    that.expands = []
                    if (row) {
                        that.expands.push(row.deliveryPlanId) //每次push进去的是每行的ID
                    }
                } else {
                    that.expands = [] //默认不展开
                }
            },
            //多选框单选
            dialogCheck: function(selection, row) {
                this.$refs.multipleTable.clearSelection()
                if (selection.length === 0) { //判断selection是否有值存在
                    return
                }
                if (row) {
                    this.selectioned = row
                    this.$refs.multipleTable.toggleRowSelection(row, true)
                }
            },
            // 取消单选的checkbox
            dialogCheckChange(row) {
                if (row.length === 0) {
                    this.selectioned = null
                }
            },
            //确认按钮点击事件：将选中的商品添加到出库列表中
            save(){
                let select_data = this.$refs.multipleTable.selection;
                this.$store.state.vueDetail.outWare.deliveryPlanId=select_data[0].deliveryPlanId
                this.$store.state.vueDetail.outWare.conDan=select_data[0].contract.contractNum
                this.$store.state.vueDetail.outWare.deliveryTime=select_data[0].deliveryTime.name
                this.$store.state.vueDetail.outWare.principal=select_data[0].principal.empName
                select_data[0].deliveryProLists.forEach(item => {
                    this.wareDetail.outNum = item.productList.proCount;
                    this.wareDetail.proDetail=item.productList.proDetail;
                    this.$store.state.vueDetail.wareDetailList.push(this.wareDetail);
                    this.clear();
                })
                //清除勾选
                this.$refs.multipleTable.clearSelection();
                this.$store.state.vueDetail.deliveryPlanVisitable = false;
            },
            cancel(){
                this.$refs.multipleTable.clearSelection();
                this.$store.state.vueDetail.deliveryPlanVisitable = false;
                this.clear();
            },
            //清空出库详情表数据
            clear(){
                this.wareDetail = {
                    outNum:0,
                    proDetail:{}
                }
            },
        },
        created:function() {
            this.initData(this.currPage);
        }
    }
</script>

<style scoped>
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .try{
        float: left;margin:5px;display:block;
    }
</style>